<template>
	<b-layout-shop @poster="posterData" :price="show.price" @action="open()" @shopbuy="shopbuy" :item="show">
		<navbar bgcolor="#fff" :title="show.name"></navbar>

		<view>
			<view class=" bg-white ">
				<view class="coverimage">
					<swiper class="swiper" circular :indicator-dots="indicatorDots" :interval="interval"
						:duration="duration">
						<block v-for="(item,index) in images">
							<swiper-item>
								<image class="image" mode="widthFix" :src="item"></image>
							</swiper-item>
						</block>
					</swiper>
				</view>
				<u-cell>
					<view slot="title" class="font-bold font-size-12">{{show.name}}</view>
					<view slot="label">
						<view class="pd-top-20">

							<view class="space-between  font-size-12">
								<view span="6">
									<view :class="dir">
										<text>{{$t('代理价格')}}</text>:<text
											class="color-price font-bold font-size-18">{{show.price}}￥</text>
									</view>
								</view>
								<view span="6">
									<view :class="dir"><text>{{$t('原价')}}</text>:<text
											class=" font-bold ">{{show.marketPrice}}￥</text></view>
								</view>
							</view>
							<view class="mg-top-10 ">
								<view class="space-between">
									<view span="6">
										<view :class="dir">
											<text class="color-label  font-size-12">{{$t('货物数量')}} </text>:<text
												class="color-label  font-size-12">{{show.quantity}}</text>
										</view>
									</view>

								</view>
							</view>


							<view class="mg-top-20 " v-if="show.remark">
								<u-alert fontSize="12" center type="info" :description="show.remark"></u-alert>
							</view>


						</view>
					</view>
				</u-cell>

			</view>

			<view class=" bg-white mg-top-10 ">

				<u-cell>
					<view slot="title" class="font-bold  font-size-12">{{$t('详细')}}</view>
					<view slot="label">
						<view class="pd-top-20 ltr" v-if="trimHtml(show.content)">

							<u-parse :content="show.content" @error="errorText"></u-parse>
						</view>
						<view class="pd-top-20 ltr" v-else>

							<u-empty mode="data" :text="$t('没有详细')">
							</u-empty>
						</view>
					</view>
				</u-cell>

			</view>

			<u-popup :round="10" :show="shopFlag" @close="close" @open="open">
				<view>
					<view class="pd-bottom-30">
						<u-cell-group>
							<u-cell>

								<u--image slot="icon" radius="10" :showLoading="true" :src="src" width="80px"
									height="80px">
								</u--image>
								<view slot="title" class="pd-left-10 pd-right-10" style="height: 80px;">
									<view class="title font-bold"> {{show.name}}</view>
									<view class="font-size-14"> <text>{{$t('库存数量')}}
										</text>:<text>{{show.quantity}}</text>
									</view>
									<view class="font-size-14"> <text>{{$t('价格')}} </text>:<text
											class="color-price font-bold font-size-18">{{show.price}}￥</text> </view>
								</view>
							</u-cell>
							<u-cell :title="$t('货物数量')" :border="false">

								<view slot="value">
									<u-number-box name="1" :min="1" @change="valChange" buttonSize="25">
									</u-number-box>
								</view>
							</u-cell>
						</u-cell-group>
					</view>
					<u-button type="primary" :color="color.primary"
						@click="goPayNav">{{$t('货物数量')}}({{paymentAmount}}￥)</u-button>
				</view>
			</u-popup>
			<posters-image ref="posterimage" />
		</view>
	</b-layout-shop>

</template>

<script>
	import {
		findById
	} from '@/api/goods.js'
	export default {
		props: {

		},
		data() {
			return {
				dir: this.$t('dir'),
				show: {
					name: '',
					paymentAmount: 0,
					price: 0,
					marketPrice: 0,
					quantity: 0,
					retailPrice: 0,
					centent: ""
				},
				shopFlag: false,
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				shoplist: {},
				paymentAmount: 0,
				discountAmount: 0,
				totalAmount: 0,
				quantity: 0,
				id: 0,
				images: [],
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				shopBuy: false,
				contentEmpty: false,
				loading: true
			}
		},
		onLoad: function(options) {
			this.id = options.id
			uni.removeStorageSync("shopStorege")
			uni.showLoading()
			this.getShow();
		},
		methods: {
			getShow() {
				var the = this;
				findById(the.id).then(res => {
					var images = res.images ? res.images : "";
					if (images != "") {
						the.images = images.split(",")
						the.images.push(res.image)
					} else {
						the.images.push(res.image)
					}
					console.log(the.images)
					the.src = res.image
					the.show = res
					the.trimHtml(res.content)
					the.selectedShop({
						value: 1
					})
					var shopbuylist = uni.getStorageSync("shopbuylist") || []
					var filteredArray = shopbuylist.filter(value => value.id > res.id);
					if (filteredArray.length > 0) {
						this.shopBuy = true
					}
					uni.hideLoading();
					the.loading = false

				}).catch(e => {
					uni.hideLoading()
					the.loading = false
				})
			},
			posterData() {
				var the = this;
				var page="page/workbench/pages/agent/show?id="+this.show.id+"&name="+this.show.name;
				the.$refs.posterimage.init(1, this.show.id,page)
			},
			open() {
				this.shopFlag = true
				// console.log('open');
			},
			close() {
				this.shopFlag = false
				// console.log('close');
			},
			shopbuy: function() {
				var shopbuylist = uni.getStorageSync("shopbuylist") || []

				var filteredArray = shopbuylist.filter(value => value.id == this.show.id);
				if (filteredArray.length > 0) {
					this.shopBuy = true
				} else {
					shopbuylist.push(this.show)
					uni.setStorageSync("shopbuylist", shopbuylist)
					this.shopBuy = true
				}
				uni.showToast({
					title: this.$t("添加购物车")
				})

			},
			valChange: function(e) {
				console.log(e)
				this.selectedShop(e)

			},
			selectedShop: function(e) {
					console.log("selectedShop:fun")
					var value = e.value;
					var item = this.show;
					this.paymentAmount = 0;
					this.discountAmount = 0;
					this.totalAmount = 0;
					this.quantity = 0;
					var a = {
						price: item.price,
						paymentAmount: (item.price * value),
						discountAmount: ((item.marketPrice - item.price) * value),
						totalAmount: (item.marketPrice * value),
						name: item.name,
						image: item.image,
						quantity: value,
						goodsId: item.id,
						brandId: item.brandId,
						categoryId: item.categoryId
					}
					this.shoplist[item.id] = a
					for (let var1 in this.shoplist) {
						var ai = this.shoplist[var1]
						//	this.priceAll = (value * item.price)
						this.paymentAmount = (this.paymentAmount + ai.paymentAmount);
						this.discountAmount = (this.discountAmount + ai.discountAmount);
						this.totalAmount = (this.totalAmount + ai.totalAmount);
						this.quantity = (this.quantity + ai.quantity);

					}

					this.priceAll = (value * item.price)
					console.log("selectedShop", this.shoplist)
					console.log("selectedShop", Object.values(this.shoplist))
					var shopStorege = {
						data: Object.values(this.shoplist),
						priceAll: this.priceAll,
						agentPrice: this.agentPrice,
						agentId: this.agentId,
						paymentAmount: this.paymentAmount,
						discountAmount: this.discountAmount,
						totalAmount: (item.marketPrice * value),
						quantity: this.quantity,
						type: 0
					}
					uni.setStorageSync("shopStorege", shopStorege)
				}

				,
			goPayNav: function() {
				if (this.quantity > 0) {
					uni.navigateTo({
						url: "./buy"
					})
				}
			},
			trimHtml: function(html = "") {
				console.log(html)
				html = html.replace("<p>", "")
				html = html.replace("</p>", "")
				//html = html.replace(/<[^>]*>/g, '')
				console.log(html)
				return html.length > 0;
			},
			errorText: function() {
				console.log("KKKKKKKKKKK")
				return "KK";
			}

		}
	}
</script>

<style lang="scss">
	.coverimage {


		.swiper {
			width: 100%;
			height: 800rpx;

			.image {
				width: 100%;
				background-color: #EEEEEE;
			}
		}
	}

	.space-between {
		display: flex;
		justify-content: space-between;
	}
</style>